<template>
    <view class="container">
        <!-- 封面图片 -->
        <view class="cover" v-if="LoginUser.cover" :style="{ background: 'url(' + LoginUser.cover + ')' }">
            <view class="avatar">
                <!-- #ifdef MP-WEIXIN -->
                <open-data type="userAvatarUrl"></open-data>
                <!-- #endif-->

                <!-- #ifdef H5 || APP-PLUS -->
                <u-image width="100%" height="200px" src="/static/images/cover.jpg"></u-image>
                <!-- #endif -->
            </view>
        </view>

        <!-- 没有封面图 -->
        <view class="cover" v-else>
            <view class="avatar">
                <!-- #ifdef MP-WEIXIN -->
                <open-data type="userAvatarUrl"></open-data>
                <!-- #endif-->

                <!-- #ifdef H5 || APP-PLUS -->
                <u-image width="100%" height="200px" src="/static/images/cover.jpg"></u-image>
                <!-- #endif -->
            </view>
        </view>

        <view class="profile">
            <u--form :model="LoginUser" labelPosition="left" ref="profile" :errorType="errorType">
                 <!-- 昵称 -->
				<u-form-item label="昵称" prop="nickname">
					<u--input v-model="LoginUser.nickname"  placeholder="请输入昵称"></u--input>
				</u-form-item>

                <!-- 邮箱 -->
				<u-form-item label="邮箱" prop="email">
					<u--input v-model="LoginUser.email" disabled placeholder="请输入邮箱"></u--input>
				</u-form-item>

                <!-- 性别 -->
				<u-form-item label='性别' prop='sex' @click="SexShow = true">
					<u--input
						v-model="LoginUser.sex_text"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择性别"
						border="none"
					>
					</u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					>
					</u-icon>
				</u-form-item>

                <!-- 地区 -->
                <u-form-item label='地区' prop='region_text' @click="RegionShow = true">
                    <pick-regions :defaultRegion="LoginUser.region" @getRegion="handleGetRegion">
                        <u--input v-model="LoginUser.region_text" disabled disabledColor="#ffffff" placeholder="请选择地区"
                            border="none">
                        </u--input>
                        <u-icon slot="right" name="arrow-right">
                        </u-icon>
                    </pick-regions>
                    <u-icon
						slot="right"
						name="arrow-right"
					>
					</u-icon>
                </u-form-item>

                <!-- 个人简介 -->
				<u-form-item label="简介" prop="content">
					<u--textarea
						v-model="LoginUser.content"
						placeholder="请输入个人简介"
						height="70"
						count="true"
					>
					</u--textarea>
				</u-form-item>

                <!-- 封面图 -->
				<u-form-item label="封面图" prop="cover" labelWidth="50">
					<u-upload
						ref="cover"
						name="cover"
						:maxCount="1"
						:fileList="cover"
						@afterRead="CoverUpload"
						@delete="CoverDel"
					>
					</u-upload>
				</u-form-item>

                <!-- 提交按钮 -->
				<u-button @click="submit" type="primary" shape="circle"  text="提交修改"></u-button>
            </u--form>
        </view>

        <!-- 性别的选择器 -->
		<u-picker 
			:show="SexShow" 
			:columns="SexList" 
			keyName="label"
			@confirm="SexChange"
			@cancel="SexShow = false"
		>
		</u-picker>
		

		<!-- 消息提示的组件 -->
		<u-toast ref="notice"></u-toast>
    </view>
</template>
<script>
// 引用地区选择组件
import pickRegions from '@/components/pick-regions/pick-regions.vue'
export default {
    components: {
        pickRegions
    },
    onShow()
    {
        this.$u.auth.check()
        let LoginUser = uni.getStorageSync('LoginUser')

        if(LoginUser.cover_cdn)
        {
            this.cover = [
                {
                    url:LoginUser.cover_cdn
                }
            ]
        }

        this.LoginUser = LoginUser

        // 让表单绑定的验证规则生效
        this.$refs.profile.setRules(this.rules)
    },
    data() {
        return {
            LoginUser:{
                nickname:'',
                email:'',
                sex:'',
                region_text:'',
                content:'',
                cover:'',
                sex_text:''
            },
            SexShow:false,
            errorType:['toast'],
            SexList:[
                [
                    { label: '男', id: '1', },
                    { label: '女', id: '2' },
                    { label: '保密', id: '0' }
                ]
            ],
            cover:[],
            RegionShow: false,
            RegionCode: null,
            //表单验证规则
            rules:{
                email: [
                    {
                        required: true,
                        type: 'email',
                        message: '您输入的邮箱格式错误',
                        // 可以单个或者同时写两个触发验证方式
                        trigger: 'blur,change'
                    }
                ],
                nickname: [
                    {
                        required: true,
                        message: '您输入的昵称错误',
                        // 可以单个或者同时写两个触发验证方式
                        trigger: 'blur,change'
                    }
                ],
                sex: [
                    {
                        required: true,
                        message: '请选择性别',
                        trigger: ['change','blur'],
                    },
                ],
                region_text: [
                    {
                        required: true,
                        message: '请选择地区',
                        trigger: ['change','blur'],
                    }
                ],
                content: [
                    {
                        required: true,
                        message: '请输入内容',
                        trigger: ['change','blur'],
                    }
                ],
            }
        }
    },
    methods: {
        handleGetRegion(item)
        {
            
            // 获取到选中的省，市，区
            let [province,city,district] = item

            // 定义字符串 => 存选中的地区文本
            let region_text = ''

            // 存选中的地区码
            let code = null

            if(province)
            {
                region_text += province.name + '-'
                code = province.code
            }

            if(city)
            {
                region_text += city.name + '-'
                code = city.code
            }

            if(district)
            {
                region_text += district.name
                code = district.code
            }

            this.LoginUser.region_text = region_text

            this.RegionCode = code
            
        },
        SexChange(value)
        {
            // 获取选中的值
            let item = value.value

            // 赋值显示的值
            this.LoginUser.sex_text = item[0].label

            // 获取id重新赋值给用户的性别属性
            this.LoginUser.sex = item[0].id // 0 1 2

            // 关闭选择器
            this.SexShow = false
        },
        CoverDel()
        {
            this.cover = []
        },
        CoverUpload(item)
        {
            let arr = []

            arr.push(item.file)

            this.cover = arr
        },
        submit()
        {
            this.$refs.profile.validate().then(async res => {

                let thumb = this.cover[0].thumb

                let result = null

                if(thumb)
                {
                    let data = {
                        filePath:thumb,
                        name:'cover',
                        formData:{
                            userid:this.LoginUser.id,
                            nickname:this.LoginUser.nickname,
                            sex:this.LoginUser.sex,
                            content:this.LoginUser.content
                        }
                    }

                    if(this.RegionCode)
                    {
                        data.formData.code = this.RegionCode
                    }

                    result = await this.$u.api.user.FroFile(data)
                }else{
                    let data = {
                        userid:this.LoginUser.id,
                        nickname:this.LoginUser.nickname,
                        sex:this.LoginUser.sex,
                        content:this.LoginUser.content
                    }

                    if(this.RegionCode)
                    {
                        data.code = this.RegionCode
                    }

                    result = await this.$u.api.user.FroFile(data)

                }

                if(result.code == 1)
                {
                    this.$refs.notice.show({
                        type:'success',
                        message:result.msg,
                        icon:true,
                        complete:() => {
                            uni.setStorageSync('LoginUser',result.data)

                            uni.switchTab({
                                url: '/pages/base/index'
                            });
                        }
                    })
                }else{
                    this.$refs.notice.show({
                        type:'error',
                        message:result.msg,
                        icon:true,
                        complete:() => {
                            uni.setStorageSync('LoginUser',null)

                            // this.$u.route({
                            //     url:'/pages/bind/bind',
                            //     type:'navigateTo'
                            // })
                        }
                    })
                }
                

            }).catch(errors => {
                this.$refs.notice.show({
                    type:'error',
                    message:errors[0].message,
                    icon:true
                })
			})
        }

    },
}
</script>
<style>
.cover {
    width: 100%;
    background: linear-gradient(rgb(1, 115, 222), rgb(78, 169, 245));
    position: relative;
    padding: 5vh 0vh;
    text-align: center;
    z-index: 0;
}

.nickname {
    color: #fff;
}

.avatar {
    width: 12vh;
    height: 12vh;
    margin: 0 auto;
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 3vh;
}

.profile {
    margin-top: 3vh;
    background: #fff;
    padding: 0vh 2vh;
    text-align: left;
}
</style>